import { Fragment } from '@/components/Fragment';

Responsive styling is supported out of the box using our default breakpoints. Our responsive support uses a mobile first approach, so `@media(min-width)` rules
are used for all breakpoints.

### Breakpoints

```js
{
  base: '0',
  small: '480px',
  medium: '768px',
  large: '992px',
  xl: '1280px',
  xxl: '1536px',
}
```

[Code](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/theme/breakpoints.ts)

<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>